<%-- 
    Document   : Points
    Created on : 2011-10-10, 21:38:46
    Author     : Cong
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>
        <sx:head debug="false" />
        <s:url action="LotteryAction_listDraws" id="listLotUrl" />
        <s:url action="LotteryAction_buyTicket" id="buyLotUrl" />
        <sx:a indicator="loadingImage" id="linkbuy" href="%{buyLotUrl}" targets="drawpage" afterNotifyTopics="/afterListLot,/afterList,/afterTicket" listenTopics="/buyTicket" executeScripts="true" />
        <sx:a indicator="loadingImage" id="linkrefresh" href="%{listLotUrl}" targets="drawpage" afterNotifyTopics="/afterListLot,/afterList" listenTopics="/refreshlottery" executeScripts="true" />

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Reward</title>
        <link rel="stylesheet" type="text/css" href="resource/user_setting/style.css" />
        <script type="text/javascript" LANGUAGE="JavaScript" src="resource/user_setting/core.js"></script>
        <script type="text/javascript" LANGUAGE="JavaScript" src="resource/user_setting/tab.js"></script>
        <link rel="stylesheet" type="text/css" href="resource/cupertino/jquery-ui-1.8.16.cupertino.css"/>
        <script type="text/javascript" src="resource/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="resource/jquery-ui-1.8.16.custom.min.js"></script>
        <style type="text/css">@import "resource/ajax/jquery.countdown.css";</style> 
        <script type="text/javascript" src="resource/ajax/jquery.countdown.pack.js"></script>
        <script type="text/javascript">
            var current_tab = "reward";
            
            function setTimer(time){
                $('#drawCountdown').countdown("destroy");
                $('#drawCountdown').countdown({until: +time, onExpiry: refresh, format: 'DHMS'});
            };
            
            function stopTimer(){
                $('#drawCountdown').countdown("destroy");
            }
            
            function refresh(tab){
                if (tab == null){
                    tab = current_tab;
                }
                dojo.event.topic.publish('/refresh' + tab);
            }

            dojo.event.topic.subscribe("/afterList", function(data, request, widget){
                //data : text returned from request
                //request: XMLHttpRequest object
                //widget: widget that published the topic
            });
            
            $(document).ready(function(){
                $("button").button().attr("autocomplete", "off");
                $("#dialog").dialog({
                modal: true,
                autoOpen: false,
                height: 450,
                width: 500
                });
                selectTab(current_tab);
            });

            function show(){
	        var name = "add item";
	        $("#dialog").dialog("option","title",name);
	        $("#dialog").dialog("open");
            }
            
            function selectTab(tab) {
                if (tab != "lottery"){
                    stopTimer();
                }
                showTabs('infolist', tab, 'li', 'current');
                current_tab = tab;
                refresh(tab);
                $('userbinding-node').style.display = (tab == 'binding') ? '' : 'none';
            }

            function initialize(info)
            {
                if(info == 1)
                    selectTab('reward');
                if(info == 2)
                    selectTab('point');
            }
        </script>
    </head>

    <s:if test="type == 1">
        <body onload=initialize(1)>
        </s:if>
        <s:elseif test="type == 2">
        <body onload=initialize(2)>
        </s:elseif>
            <s:else><body></s:else>

        <div id="user-wrap">
            <div id="user-nav">
                <%@ include file="UserSettingHead.jsp" %>
            </div>
            <div id="user-main">
                <div class="u-m-bg"></div>
                <div class="u-m-bg-c cc">

                    <table id="wrapper">
                        <tr>
                            <td>                                                
                                <img class="centerimg"  id="loadingImage" src="resource/ajax/ajax-loader.gif" style="display:none"/>
                            </td>
                        </tr>
                    </table>


                    <div class="p10">
                        <s:div cssClass="user-points">Current Points: <b id="cur_point">${user.points}</b></s:div>
                            <div class="u-nav-2 cc">
                                <ul id="infolist">
                                    <li id="reward"><a style="cursor:pointer" hidefocus="true" onclick="selectTab('reward')">Rewards</a></li>
                                    <li id="point"><a style="cursor:pointer" hidefocus="true" onclick="selectTab('point')">My Points</a></li>
                                    <li id="lottery"><a style="cursor:pointer" hidefocus="true" onclick="selectTab('lottery')">Lottery</a></li>
                                </ul>
                            </div>
                            <div class="u-cont-bg-c">
                                <table width="100%" height="450">
                                    <tr>
                                        <td class="vt">
                                        <%--Reward Tab--%>
                                        <div class="p15" style="display:none" id="info_reward">
                                            <table width="100%" class="mt10 bor-t-c" border="0">
                                                <s:iterator value="items">
                                                    <s:url id="url_changeItem" value="ItemAction_redeem">
                                                        <s:param name="itemID" value="itemId"/>
                                                    </s:url>
                                                    <tr class="user-tr">
                                                        <td rowspan="4"><img height="150" src="<s:property value='itemImagePath'/>"></td>
                                                        <td>Name:</td>
                                                        <td><s:property value="itemName"/></td>
                                                        <td align="center" rowspan="4">
                                                            <s:if test="%{ itemPrice > current_points }">
                                                                <button type="button" disabled ="disabled">Not Enough Points</button>
                                                            </s:if>
                                                                <s:elseif test="%{ itemAmount <= 0 }">
                                                                <button type="button" disabled ="disabled">Out of Stock</button>
                                                            </s:elseif>
                                                            <s:else>
                                                                
                                                                <s:a href="%{url_changeItem}"><button type="button" >Redeem</button></s:a></s:else>
<!--                                                                <button type="button" >Update</button>-->
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                <br/><br/>
                                                                <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
                                                                <div class="fb-like" data-send="false" data-layout="button_count" data-width="15" data-show-faces="true"></div>
                                                            
                                                        </td>
                                                    </tr>
                                                    <tr class="user-tr">
                                                        <td width="100">Description:</td>
                                                        <td width="350"><s:property value="itemDescription"/></td>
                                                        <td></td>
                                                    </tr>
                                                    <tr class="user-tr">
                                                        <td>Price:</td>
                                                        <td><s:property value="itemPrice"/>&nbsp;point(s)</td>
                                                    </tr>
                                                    <tr class="user-tr">
                                                        <td>Amount:</td>
                                                        <td><s:property value="itemAmount"/></td>
                                                    </tr>
                                                </s:iterator>
                                                <tr class="user-tr"><td colspan="4"></td></tr>
                                            </table>
                                            page <s:property value="now"/> of <s:property value="pageCount"/>&nbsp;&nbsp;
                                            <s:url id="url_pre" value="ItemAction_listItems">
                                                <s:param name="now" value="now-1"/>
                                            </s:url>
                                            <s:url id="url_first" value="ItemAction_listItems">
                                                <s:param name="now" value="1"/>
                                            </s:url>
                                            <s:url id="url_next" value="ItemAction_listItems">
                                                <s:param name="now" value="now+1"/>
                                            </s:url>
                                            <s:url id="url_last" value="ItemAction_listItems">
                                                <s:param name="now" value="pageCount"/>
                                            </s:url>
                                            <s:a href="%{url_first}">first</s:a>
                                            <s:if test="now!=1">
                                                <s:a href="%{url_pre}">pre</s:a>
                                            </s:if>
                                            <s:if test="now!=pageCount">
                                                <s:a href="%{url_next}">next</s:a>
                                            </s:if>
                                            <s:a href="%{url_last}">last</s:a>
                                            <br><br>
                                            <s:if test="#session.user.role.roleId == 3">
                                            <button type="button" onclick="show()">New</button>
                                            </s:if>
                                            </div>
                                        <%--Point History Tab--%>
                                        <div class="p15" style="display:none" id="info_point">
                                            <p>your point:${user.points}</p>
                                            <br>
                                            <p>history:</p>
                                            <table width="100%" class="mt10 bor-t-c">
                                                <tr class="user-tr">
                                                    <td>date</td>
                                                    <td>amount</td>
                                                    <td>reason</td>
                                                </tr>
                                                <s:iterator value="points">
                                                    <tr class="user-tr">
                                                        <td>
                                                            <s:date name="pointDispatchDate" format="yyyy-MM-dd HH:mm"/>
                                                        </td>
                                                        <td>
                                                            <s:property value="pointDispatchAmount"/>
                                                        </td>
                                                        <td>
                                                            <s:property value="pointDispatchReason"/>
                                                        </td>
                                                    </tr>
                                                </s:iterator>
                                            </table>
                                            page <s:property value="now2"/> of <s:property value="pageCount2"/>&nbsp;&nbsp;
                                            <s:url id="url_pre2" value="ItemAction_listPoints">
                                                <s:param name="now2" value="now2-1"/>
                                            </s:url>
                                            <s:url id="url_first2" value="ItemAction_listPoints">
                                                <s:param name="now2" value="1"/>
                                            </s:url>
                                            <s:url id="url_next2" value="ItemAction_listPoints">
                                                <s:param name="now2" value="now2+1"/>
                                            </s:url>
                                            <s:url id="url_last2" value="ItemAction_listPoints">
                                                <s:param name="now2" value="pageCount2"/>
                                            </s:url>
                                            <s:a href="%{url_first2}">first</s:a>
                                            <s:if test="now2!=1">
                                                <s:a href="%{url_pre2}">pre</s:a>
                                            </s:if>
                                            <s:if test="now2!=pageCount2">
                                                <s:a href="%{url_next2}">next</s:a>
                                            </s:if>
                                            <s:a href="%{url_last2}">last</s:a>
                                            </div>
                                        <%--Lottery Tab--%>
                                        <div class="p15" style="display:none" id="info_lottery">
                                            <div id="drawCountdown"></div>
                                            <sx:div id="drawpage" autoStart="false" showLoadingText="false"  />

                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </body>

</html>
<div id="dialog"><form action ="ItemActionAdmin_save" method ="post">
        <table><tr><td width="100">name</td><td><input name="name" size="16"/></td>
            </tr>
        <tr><td>price</td><td><input name="price" size="16"/></td>
            </tr>
        <tr><td>amount</td><td><input name="amount" size="16"/></td>
            </tr>
        <tr><td>description</td><td><textarea name="description" cols="30" rows="5"></textarea></td>
            </tr>
        <tr><td>imagePath</td><td><input name="path" size="32"/></td>
            </tr></table>
    <div align="center">
        <button type="submit">Save</button>
    </div></form></div>

<%@ include file="ForumFoot.jsp" %>
<div id="fb-root"></div>
<script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>